<template>
  <a-drawer
    title="Webhook"
    :maskStyle="{background: 'transparent'}"
    :maskClosable="false"
    :visible="dialog"
    width="500"
    @close="cancel"
  >
    <div class="worksheet_trigger_body">
      <div class="worksheet_trigger_form">
        <div class="form_item">
          <a-radio-group v-model="webhookData.webhookType">
            <a-radio value="defaultRequest">
              发送指定webhook
            </a-radio>
            <a-radio value="customRequest">
              发送自定义webhook
            </a-radio>
          </a-radio-group>
        </div>
        <div class="form_item" v-for="item in schemaInputs" :key="item.id">
          <template v-if="item.customType === 'selectNode'">
            <div class="form_item_title">{{item.title}}</div>
            <a-select v-model="inputs[item.key]" optionFilterProp='children' show-search style="width: 100%">
              <a-select-option v-for="item in output" :key="item.nodeId" :value="item.nodeId">
                {{item.nodeName}}
              </a-select-option>
            </a-select>
          </template>
          <template v-if="item.customType === 'customRequest' && webhookData.webhookType === 'customRequest'">
            <div class="form_item_title">选择数据对象</div>
            <a-select v-model="webhookData.customData.httpMethod" optionFilterProp='children' show-search style="width: 100%">
              <a-select-option value="GET">
                GET
              </a-select-option>
              <a-select-option value="POST">
                POST
              </a-select-option>
            </a-select>
            <div class="form_item_title">Webhook URL</div>
            <workflow-notice v-model="webhookData.customData.webhookUrl" :noticeData="webhookData.customData.webhookUrlStoreData" @change="handleWebhookUrlChange" :output="output"></workflow-notice>
            <div class="form_item_title">Headers</div>
            <webhook-headers :headers="webhookData.customData.headers" 
              :output="output"
              title="header"
              @change="webhookHeaderChange"
            >
            </webhook-headers>
            <div class="form_item_title">Body</div>
            <a-radio-group v-model="webhookData.customData.bodyType">
              <a-radio value="kv">
                key-value pairs
              </a-radio>
              <a-radio value="raw">
                raw (application/json)
              </a-radio>
            </a-radio-group>
            <webhook-headers v-if="webhookData.customData.bodyType === 'kv'"
              :headers="webhookData.customData.body.kv" 
              :output="output"
              title="body"
              @change="webhookBodyChange"
            >
            </webhook-headers>
            <workflow-notice v-if="webhookData.customData.bodyType === 'raw'"
              v-model="webhookData.customData.body.raw" 
              :noticeData="webhookData.customData.bodyRowStoreData" 
              @change="handleBodyRowChange" 
              :output="output"
            ></workflow-notice>
          </template>
          <template v-if="item.customType === 'defaultRequest' && webhookData.webhookType === 'defaultRequest'">
            <div class="form_item_title">选择数据对象</div>
            <a-select v-model="webhookData.defaultData.nodeId" optionFilterProp='children' show-search style="width: 100%">
              <a-select-option v-for="outputItem in output" :key="outputItem.nodeId" :value="outputItem.nodeId">
                {{outputItem.nodeName}}
              </a-select-option>
            </a-select>
            <div class="form_item_title">Webhook URL</div>
            <workflow-notice v-model="webhookData.defaultData.webhookUrl" :noticeData="webhookData.defaultData.webhookUrlStoreData" @change="handleWebhookUrlChange" :output="output"></workflow-notice>
            <div class="form_item_title">Headers</div>
            <webhook-headers :headers="webhookData.defaultData.headers" 
              :output="output"
              title="header"
              @change="webhookHeaderChange"
            >
            </webhook-headers>
          </template>
        </div>
      </div>
      <div class="worksheet_trigger_foot">
        <a-button type="primary" @click="save">
          保存
        </a-button>
        <a-button @click="cancel">
          取消
        </a-button>
      </div>
    </div>
  </a-drawer>
</template>
<script>
import {uuid} from "@/utils/utils"
import {getNodeOutput} from "@/api/appWorkflow"
import WorkflowNotice from "../../workflowNotice.vue"
import WebhookHeaders from "../../webhookHeader/index"
export default {
  components: {
    WorkflowNotice,
    WebhookHeaders,
  },
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    node: {
      type: Object,
      default: undefined
    }
  },
  data(){
      return {
        schemaInputs: [],
        inputs:{},
        webhookData:{
          webhookType: 'defaultRequest',
          defaultData:{
            headers: [],
            nodeId: '',
            webhookUrl: '',
            webhookUrlStoreData: '',
          },
          customData:{
            headers: [],
            bodyType: 'kv',
            bodyRowStoreData: '',
            body: {
              kv: [
                {
                  uuid: 'first',
                  key:"",
                  value: "",
                  storeValue: ""
                }
              ],
              raw: '',
            },
            httpMethod: 'GET',
            webhookUrl: '',
            webhookUrlStoreData: '',
          },
        },
        output: [],
      }
  },
  watch: {
    dialog: {
      async handler (val) {
        if(this.dialog){
          let schemaInputs = this.node?.schema?.inputs || {}
          this.inputs = this.node?.inputs || {}
          let output = await getNodeOutput({
            automationId: this.id,
            nodeId: this.node.nodeId
          })
          this.output = output
          if(this.inputs.defaultRequest){
                this.webhookData.webhookType = 'defaultRequest'
                this.webhookData.defaultData = this.inputs.defaultRequest
            }
            else if(this.inputs.customRequest){
                this.webhookData.webhookType = 'customRequest'
                this.webhookData.customData = this.inputs.customRequest

                if(!this.webhookData.customData.body.kv){
                this.webhookData.customData.body.kv = [{
                    uuid: 'first',
                    key:"",
                    value: "",
                    storeValue: ""
                }]
                }
                if(!this.webhookData.customData.body.raw){
                this.webhookData.customData.body.raw = ''
                }
            }
          this.schemaInputs = schemaInputs.order.map(o => {
            for (const key in schemaInputs.properties) {
              if(key === o){
                return {
                  ...schemaInputs.properties[key],
                  id: uuid(),
                  key
                }
              }
            }
          })
        }
      },
      deep: true,
    },
  },
  methods: {
    webhookBodyChange(value){
      this.webhookData.customData.body.kv = value
    },
    webhookHeaderChange(headers){
      if(this.webhookData.webhookType === 'defaultRequest'){
         this.webhookData.defaultData.headers = headers
      }
      else if(this.webhookData.webhookType === 'customRequest'){
         this.webhookData.customData.headers = headers
      }
    },
    handleWebhookUrlChange(value){
      if(this.webhookData.webhookType === 'defaultRequest'){
         this.webhookData.defaultData.webhookUrlStoreData = value
      }
      else if(this.webhookData.webhookType === 'customRequest'){
         this.webhookData.customData.webhookUrlStoreData = value
      }
    },
    handleBodyRowChange(value){
      this.webhookData.customData.bodyRowStoreData = value
    },
    cancel () {
      this.$emit('close')
    },
    async save(){
        if(this.webhookData.webhookType === 'defaultRequest'){
            this.inputs.defaultRequest = this.webhookData.defaultData
            delete this.inputs.customRequest
        }
        else if(this.webhookData.webhookType === 'customRequest'){
            let bodyType = this.webhookData.customData.bodyType
            this.inputs.customRequest = this.webhookData.customData
            this.inputs.customRequest.body = {
                [bodyType]: this.webhookData.customData.body[bodyType]
            }
            delete this.inputs.defaultRequest
        }

      this.$emit('close')
      this.$emit('setProperties', {
        inputs: this.inputs
      })
    }
  },
  computed:{
    appId(){
      return this.$route.params.appId
    },
    id(){
        return this.$route.params.id
    }
  }
}
</script>

<style scoped>
.form_item{
  margin-top: 10px;
  margin-bottom: 20px;
}
.form_item_title{
  /* font-size: 18px; */
  /* font-weight: bold; */
  color: #000000;
  margin: 15px 0 5px 0;
}
</style>